{% extends "extends/base_all_.html" %}


{% block content %}
<div class="container">
    <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-md-6 col-lg-4">
            <div class="card shadow">
                <div class="card-body p-5">
                    <div class="text-center mb-4">
                        <i class="bi bi-person-plus fs-1 text-success"></i>
                        <h2 class="mt-3 mb-2">注册新账户</h2>
                    </div>
                    <form id="form">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control form-control-lg" id="username" placeholder="请输入用户名" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" class="form-control form-control-lg" id="password" placeholder="请输入密码" required>
                        </div>
                        <button type="submit" class="btn btn-success btn-lg w-100 mb-3">
                            <i class="bi bi-person-check me-2"></i>立即注册
                        </button>
                    </form>
                    <div class="d-flex justify-content-between mt-3">
                        <a href="#" class="text-decoration-none" id="login_a">返回登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    onUrlsReady(urls => {
        Element_('login_a').href = urls.page.login;

        Event_('form', 'submit', event => {

            Fetch(urls.service.register, 'post', Pack({
                'username': 'username',
                'password': 'password'
            }), async json => {
                if (json.msg) await Flash(json.msg);

                if (json.status === 'success') {
                    Redirect(urls.page.login);
                }
            });

        });
    });
</script>

{% endblock %}
